<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button onclick="doAjax()">$.ajax(...)</button><br>
        <button onclick="doGet()">$.get(...)</button><br>
        <button onclick="doAjaxGetJOSN()">$.getJson(...)</button><br>
        <button onclick="doAjaxPost()">$.post(...)</button><br>
        <button onclick="doAjaxPostJSON()">$.AjaxJSON(...)</button><br>
        <button onclick="doAjaxLoad()">$("selecor").load(...)</button>
    </div>
    <div id="result">

    </div>
    <script src="js/jquery.min.js"></script>
<script>
    function doAjaxLoad() {
        //1,url
        let url="http://localhost/doGet";
        //2,send ajax post request
        //jquery中load函数语法.load(url[,params][,callback])[可选参数]
        $("#result").load(url,function () {//资源加载完成之后执行
            console.log("load complete");
        });//异步加载url对应的资源,然后更新到result位置
    }
    function doAjaxPostJSON(){
        //1,url
        let url="http://localhost/doPostJSON";
        //2,params
        // let params="id=1&name=xiaomi&letter=x";
        let params={"id":2,"name":"huawei","letter":"x"};//js对象
        //3,send ajax post request
        $.ajax({
            url:url,
            type:"post",
            contentType:"application/json;charset=utf-8",
            data:JSON.stringify(params),
            success:function(result){
               $("#result").html(result);
            }
        });
    }
    function doAjaxPost(){
        //1,url
        let url="http://localhost/doPost";
        //2,params
        // let params="id=1&name=xiaomi&letter=x";
        let params={"id":2,"name":"huawei","letter":"x"};//js对象
        //3,send ajax post request
        $.post(url,params,function (result){
          console.log(result);
          });
    }
    function doAjaxGetJOSN(){
        //1,url
        let url="http://localhost/doGet";
        //2,params
        let params="";
        //3,send ajax request
        $.getJSON(url,params,function(result){//success
            console.log(result);
        });
    }
    function doGet(){
        //1,url
        let url="http://localhost/doGet";
        //2,params
        let params="";
        //3,send ajax request
        $.get(url,params,function(result){//success
            console.log(result);
        },"json");
    }
    function doAjax(){
        // debugger;
        //1,请求url
        let url="http://localhost/doGet";
        //2,请求参数
        let params="msg=hello jquery ajax";
        //3,发送异步ajax请求
        $.ajax({
            type:"GET",//默认get
            url:url,
            data:params,
            dataType:"text",//数据类型是 json字符串
            async:true,//同步还是异步
            success:function(result){//readyState==4&&status==200
               $("#result").html(result);//innerHTML
            },
            error:function(xhr){
                $("#result").html("jquery fail");
                console.log(xhr);//XMLHTTPRequert;
            }
        });
    }
</script>
</body>
</html>